<!-- ? 模块 -->
<template>
    <FormBuilder ref="formRef" v-model="formData" :formItems="formItems" :rules="rules">
    </FormBuilder>
    <el-button @click="submitForm" type="primary">提交</el-button>
</template>

<script lang="ts" setup>
import FormBuilder from '@/components/FormBuilder.vue';
import type { Options } from 'element-plus';
import { computed, h, ref, useTemplateRef } from 'vue';

const formData = ref({
    name: undefined,
    age: undefined,
});

const formInstance = useTemplateRef('formRef');

async function submitForm() {
    await formInstance.value.validate();
    console.log(formData.value);
}

const rules = ref({
    name: [
        {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
        },
        {
            min: 2,
            max: 5,
            message: '长度在 2 到 5 个字符',
            trigger: 'blur',
        },
    ],
    age: [
        {
            required: true,
            message: '请输入年龄',
            trigger: 'blur',
        },
        {
            type: 'number',
            message: '年龄必须为数字值',
            trigger: ['blur', 'change'],
        },
    ],
});

const formItems = computed(() => {
    return [
        {
            // type: () => h('div', {}, '自定义组件'),
            label: '姓名',
            key: 'name',
            placeholder: '请输入姓名',
        },
        {
            type: 'number',
            label: '年龄',
            key: 'age',
            placeholder: '请输入年龄',
            onclick: () => {
                console.log('click');
            },
            oninput: () => {
                console.log('input');
            },
        },
        {
            type: 'select',
            label: '性别',
            key: 'sex',
            hidden: formData.value.name === '张三',
            props: {
                placeholder: '请选择性别',
                options: [
                    { label: '男', value: 1 },
                    { label: '女', value: 2 },
                ],
            },
        },
    ];
})
</script>

<style lang="scss" scoped>
.da-view {}
</style>
